<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>开始使用layui</title>
    <link rel="stylesheet" href="../layui/css/layui.css" th:href="@{/webjars/layui/2.5.6/css/layui.css}">
</head>
<body>

<!-- 你的HTML代码 -->
<ul class="layui-nav">
    <li class="layui-nav-item">
        <a href="">控制台<span class="layui-badge">9</span></a>
    </li>
    <li class="layui-nav-item">
        <a href="">个人中心<span class="layui-badge-dot"></span></a>
    </li>
    <li class="layui-nav-item">
        <a href=""><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:;">修改信息</a></dd>
            <dd><a href="javascript:;">安全管理</a></dd>
            <dd><a href="javascript:;">退了</a></dd>
        </dl>
    </li>
</ul>
<div class="layui-fluid">
    <div class="layui-col-md3">
        <img src="#" th:src="${imageUrl}" th:width="200" th:height="200" />
        <p>点点关注不迷路！</p>

    </div>
    <div class="layui-col-md9">
        <table class="layui-table">
            <colgroup>
                <col width="150">
                <col width="200">
                <col>
            </colgroup>
            <thead>
            <tr>
                <th>序号</th>
                <th>openId</th>
                <th>昵称</th>
                <th>头像</th>
                <th>地址</th>
                <th>性别</th>
                <th>操作</th>

            </tr>
            </thead>
            <tbody>
            <tr th:each="a,vs:${userInfo}" >
                <td th:text="${vs.index+1}"></td>
                <td th:text="${a.get('openid')}"></td>
                <td th:text="${a.get('nickname')}"></td>
                <td > <img src="#" th:src="${a.get('headimgurl')}"></td>
                <td th:text="${a.get('country')+' '+a.get('province')+' '+a.get('city')}"></td>
                <td th:if="${a.get('sex')} eq 0">未设置</td>
                <td th:if="${a.get('sex')} eq 1">男</td>
                <td th:if="${a.get('sex')} eq 2">女</td>
                <td >
                    <button class="layui-btn layui-btn-xs" name="details" th:attr="myopenid=${a.get('openid')}">详情</button>
                    <button class="layui-btn layui-btn-xs layui-bg-cyan" name="send_msg"
                            th:attr="myopenid=${a.get('openid')}">发送消息
                    </button>
                </td>

            </tr>
            </tbody>
        </table>
    </div>

</div>
<div id="Detail" style="display: none">
<table class="layui-table" >
    <thead>
    <th>key</th>
    <th>value</th>
    </thead>
    <tr>
        <td>是否关注</td>
        <td>是</td>
    </tr>
    <tr>openid</tr>
    <tr>昵称</tr>
    <tr>性别</tr>
    <tr>城市</tr>
    <tr>国家</tr>
    <tr>省份</tr>
    <tr>语言</tr>
    <tr>头像</tr>
    <tr>关注时间</tr>
    <tr>unionid</tr>
    <tr>备注</tr>
    <tr>分组编号</tr>
    <tr>标签id列表</tr>
    <tr>关注来源的渠道</tr>
    <tr>二维码扫码场景</tr>
    <tr>场景描述</tr>

    <tbody>
    </tbody>

</table>
</div>

<form class="layui-form" action="#" style="display: none" id="sendMsgForm">
    <div class="layui-form-item">
        <label class="layui-form-label">openid</label>
        <div class="layui-input-block">
            <input type="text" name="openid" required lay-verify="required" placeholder="openid" autocomplete="off"
                   class="layui-input" readonly="readonly">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">消息类型</label>
        <div class="layui-input-block">
            <select name="msgtype" lay-verify="required" id="msgtype" lay-filter="msgtype">
                <option value="">请选择消息类型</option>
                <option value="text">文本消息</option>
                <option value="news">图文消息</option>
            </select>
        </div>
    </div>

    <!--    文本消息-->
    <div class="layui-form-item mytextclass" id="content_id" style="display: none">
        <label class="layui-form-label">文本消息</label>
        <div class="layui-input-block">
            <input type="text" name="content" required lay-verify="required" placeholder="请输入需要发送的消息" autocomplete="off"
                   class="layui-input">
        </div>
    </div>

    <!--    图文消息内容-->

    <div id="news_id" style="display: none">
        <div class="layui-form-item">
            <label class="layui-form-label">title</label>
            <div class="layui-input-block">
                <input type="text" name="title" placeholder="请输入标题" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">描述</label>
            <div class="layui-input-block">
                <input type="text" name="desc" placeholder="请输入描述信息" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图文链接</label>
            <div class="layui-input-block">
                <input type="text" name="url" placeholder="请输入图文链接" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图片地址</label>
            <div class="layui-input-block">
                <input type="text" name="picurl" placeholder="请输入图片地址" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
    </div>


    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">发送消息</button>
            <button type="button" class="layui-btn layui-btn-primary" id="btn_close">关闭</button>
        </div>
    </div>
</form>
<script src="../layui/layui.js" th:src="@{/webjars/layui/2.5.6/layui.all.js}"></script>
<script>
    //一般直接写在一个js文件中
    layui.use(['layer', 'form','jquery'], function(){
        var layer = layui.layer
            ,form = layui.form,
                $=layui.$;


        $("[name='send_msg']").click(function () {

            let openid = $(this).attr("myopenid");
            $("[name='openid']").val(openid);

            layer.open({
                type: 1,
                content: $('#sendMsgForm'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                area: '500px'
            });

        });

        $("[name='details']").click(function () {

            let openid = $(this).attr("myopenid");
            $("[name='openid']").val(openid);

            layer.open({
                type: 1,
                content: $('#Detail'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                area: '500px'
            });

        });


        //监听 切换事件
        form.on('select(msgtype)', function (data) {
            console.log(data.elem); //得到select原始DOM对象
            console.log(); //得到被选中的值
            console.log(data.othis); //得到美化后的DOM对象

            var msgtype = data.value;
            if (msgtype === "text") {
                $("[name='content']").val("");
                $("#content_id").show();
                $("#news_id").hide();

            } else {
                form.render();
                $("#content_id").hide();
                $("#news_id").show();
            }

        });

        //监听表达 提交
        form.on('submit(formDemo)', function (data) {
            // console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            // console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            let param = data.field;
            $.post("send/msg", param, function (result) {
                if (result === 1) {
                    layer.msg({icon: 1}, "消息发送成功!");
                    layer.closeAll();
                } else {
                    layer.msg({icon: 3}, "消息发送失败!");
                }
            }, "json")

            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        $("#btn_close").click(function () {
            layer.closeAll();
        });


    });
</script>
</body>
</html>